<template>
	<view>
	<!-- 	<view class="paihangbang">
			排行榜
		</view> -->
		<view class="bk">
			<view class="bk2">
				<view v-for="item in ranktext" :key="item.name" class="left" >
					<view :class="{ active:index ==item.name}" @click="change(item.name)" >
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="bk2">
				<view style="margin-top: 30upx;">					
				</view>
				<view class="bottom-list">
					<view v-for="(item,index) in result" :key="index" @click=jump(item) >
						<infoCard :cardImg="item.pictureUrl" :restName="item.resName" :gradeNum="item.starNum" :commentCount="item.commentNum" ></infoCard>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import infoCard from "../../components/infoCard.vue";
	import helper from '../../common/helper.js'
	export default{
		onLoad:function() {
			uni.request({
				url:"https://gljh.utools.club/food/FindResRank",
				data:{
					longitude:'103.99443',
					latitude :'30.590136',
					typename:"总榜"
				},
				method:"GET",
				success: (res) => {
					console.log(res.data.data)
					this.result=res.data.data
				}
			})
		},
		components: {
			infoCard
		},
		data(){
			return{
				index:"总榜",
				str:"",
				ranktext:[{name:'总榜'},{name:'主食榜'},{name:'火锅榜'},{name:'小吃榜'},{name:'烘焙榜'},{name:'海鲜榜'},{name:'汤羹榜'}],
				restMsg: [
					
				],
				result:[],
			}
		},
		methods:{
			jump(e){
				console.log(e);
				let realVal = parseFloat(e.dis).toFixed(2)
				uni.request({
					url:"https://gljh.utools.club/food/resturand_locate/"+e.restid,
					method:"POST",
					success: (res) => {
						console.log(res.data)
						uni.navigateTo({
							url:"../restLocation/restLocation?str="+res.data.data.name+" 距离"+realVal+"km"+"&lat="+res.data.data.latitude+"&long="+res.data.data.longitude
						})
					}
				})
			},
			change(e){
				this.index=e					
				var str1=e.substring(0,2)
				console.log(str1)
				uni.request({
					url:"https://gljh.utools.club/food/FindResRank",
					data:{
						longitude:'103.99443',
						latitude :'30.590136',
						typename:str1
					},
					method:"GET",
					success: (res) => {
						console.log(str1)
						console.log(res.data.data)
						this.result=res.data.data
					}
				})
				
			}
			
		}
	}
</script>

<style>
.paihangbang{
	background-color: #F8F8F8;
	border-bottom: #999999 solid 2upx;
	height: 100upx;
	
}
.active{

	width: 150upx;
	height: 60upx;
	background-color: #00ff7f;
	border-radius: 0  20upx 20upx 0;
}
.bk{
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 1200upx;
	background-color: #F8F8F8;
}
.bk2{
	display: flex;
	flex-direction: column;
}
.left{
	display: flex;
	flex-direction: ;
	width: 150upx;
	height: 60upx;
	margin-top: 50upx;
	background-color: #e6e6e6;
	border-radius: 0  20upx 20upx 0;
}
.right{
	display: flex;
	flex-direction: column;
	width: 150upx;
	height: 60upx;
	margin-top: 50upx;
	background-color: #dfdfdf;
	border-radius: 0  20upx 20upx 0;
}
.bottom-list {
box-sizing: border-box;
width: 600upx;
height: auto;
// margin: 150upx;
padding-left: 20upx;
padding-right: 20upx;
// border: 1px solid red;
}
</style>
